<template>
  <Card>
    <h3 class="title">程序员需求人数</h3>
    <div class="row active row-title">
      <div class="col col-1">日期</div>
      <div class="col col-2">地址</div>
      <div class="col col-1">人数</div>
    </div>
    <div
      class="container"
      @mouseenter="isHover = true"
      @mouseleave="isHover = false"
    >
      <div :style="{ transform: `translateY(${top / 10}px)` }">
        <div :style="{ height: startIndex * 30 + 'px' }"></div>
        <div class="row" v-for="item in sliceList" :key="item.id">
          <div class="col col-1">{{ item.date }}</div>
          <div class="col col-2">{{ item.address }}</div>
          <div class="col col-1">{{ item.num }}</div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Right",
});

import { ref, onBeforeUnmount, computed } from "vue";

import { useSocket } from "@/utils/socket";

type IList = {
  id: string;
  date: string;
  address: string;
  num: number;
}[];

const list = ref<IList>([]);
const socket = useSocket("ws://localhost:3001");
socket.onmessage((data: IList) => {
  list.value = [...list.value, ...data];
  if (!isMove && list.value.length > 20) {
    move();
  }
});

const top = ref(0);
let isMove = false;
let timeId: NodeJS.Timeout;
let isHover = false;
const move = () => {
  isMove = true;
  timeId = setInterval(() => {
    if (isHover) return;
    top.value -= 4;
    if (top.value % 300 === 0) {
      startIndex.value++;
    }
  }, 1000 / 60);
};
onBeforeUnmount(() => {
  clearInterval(timeId);
});

const startIndex = ref(0);
const showNum = ref(20);
const sliceList = computed(() => {
  return list.value.slice(startIndex.value, startIndex.value + showNum.value);
});

// socket.ws.addEventListener("message", (e) => {
//   // 1. 只能接受到数据，不要pong信号
//   // 2. 断线重连之后，还能接受到原来数据
//   console.log(e.data);
// });

// web socket
// const ws = new WebSocket("ws://localhost:3001");

// ws.addEventListener("message", (e) => {
//   const data = JSON.parse(e.data);
//   console.log(data);
// });

// // 如果是服务器断开链接，触发close
// // 如果是前端断网, 不会触发事件 -> 检测这个情况 ->
// // 心跳检测：检测客户端和服务器的ws链接是否还正常，能否正常通信
// ws.onclose = () => {
//   console.log("close");
// };
// ws.onerror = () => {
//   console.log("error");
// };
</script>

<style scoped lang="scss">
.title {
  margin: 10px 0;
  font-size: 12px;
  color: #fff;
  text-align: center;
  height: 15px;
}

.container {
  height: calc(100% - 65px);
  padding: 0 10px;
  overflow: hidden;
}

.row-title {
  margin: 0 10px;
}
.row {
  display: flex;
  height: 30px;
  &:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    .col {
      color: #68d8fe;
    }
  }
}
.col {
  text-align: center;
  color: #61a8ff;
  font-size: 12px;
  line-height: 30px;
  transform: scale(0.8);
}

.col-1 {
  flex: 1;
}
.col-2 {
  flex: 2;
}

.active {
  background-color: rgba(255, 255, 255, 0.1);
  .col {
    color: #68d8fe;
  }
}
</style>
